<template>
  <view class="home-page">
    <MySearch class="search-component" @click="toSearch"></MySearch>
    <view class="ghost"></view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <navigator class="swiper-item" :url="`/subpkg/GoodsDetail/GoodsDetail?goods_id=${item.goods_id}`" open-type="navigate">
          <image :src="item.image_src" mode="aspectFill"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <view class="nav">
      <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="toCategoryPage(item)">
        <image :src="item.image_src" mode="aspectFit"></image>
      </view>
    </view>
    <view class="floor" v-for="(item, index) in floorList" :key="index">
      <view class="floor-title">
        <image :src="item.floor_title.image_src" mode="widthFix"></image>
      </view>
      <view class="floor-content">
        <view class="left">
          <navigator :url="item.product_list[0].navigator_url">
            <image :src="item.product_list[0].image_src" :style="{ width: item.product_list[0].image_width + 'rpx' }" mode="widthFix"></image>
          </navigator>
        </view>
        <view class="right">
          <navigator :url="image.navigator_url" v-for="(image, idx) in item.product_list.slice(1)" :key="idx" :style="{ width: image.image_width + 'rpx' }">
            <image :src="image.image_src" mode="widthFix"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList: [],
        navList: [],
        floorList: []
      }
    },
    computed: {
      info() {
        return this.$store.getters.info
      }
    },
    methods: {
      async getSwiperList() {
        const result = await uni.$http.get('/api/public/v1/home/swiperdata')
        if (result.statusCode !== 200) {
          // uni.showToast({
          //   title: '数据请求失败！',
          //   duration: 1500,
          //   icon: 'none'
          // })
          uni.$showMessage()
        } else {
          this.swiperList = result.data.message
        }
      },
      async getNavList() {
        const result = await uni.$http.get('/api/public/v1/home/catitems')
        if(result.statusCode !== 200) {
          uni.$showMessage()
        }
        else {
          this.navList = result.data.message
        }
      },
      // navigator_url: /subpkg/GoodsList/GoodsList?query=服饰
      async getFloorList() {
        const result = await uni.$http.get('/api/public/v1/home/floordata')
        if(result.statusCode !== 200) {
          uni.$showMessage()
        }
        else {
          this.floorList = result.data.message
          this.floorList.forEach(item => {
            item.product_list.forEach(value => {
              value.navigator_url = '/subpkg/GoodsList/GoodsList?' + value.navigator_url.split('?')[1]
            })
          })
        }
      },
      toCategoryPage(item) {
        if(item.name === '分类') {
          uni.switchTab({
            url: '/pages/cate/cate'
          })
        }
      },
      toSearch() {
        uni.navigateTo({
          url: '/subpkg/Search/Search'
        })
      }
    },
    onLoad() {
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    onShow() {
      uni.setTabBarBadge({
        index: 2,
        text: `${this.info}`
      })
    }
  }
</script>

<style lang="scss" scoped>
  .home-page {
    position: relative;
    .search-component {
      position: fixed;
      top: 0;
      left: 0;
      width: 750rpx;
      z-index: 999;
    }
    .ghost {
      height: 50px;
      background-color: transparent;
    }
    swiper {
      height: 330rpx;
      .swiper-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .nav {
      display: flex;
      margin-top: 20rpx;
      height: 187.5rpx;
      
      .nav-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25%;
        
        image {
          height: 100%;
        }
      }
    }
    .floor {
      .floor-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20rpx;
        
        image {
          width: 100%;
        }
      }
      .floor-content {
        display: flex;
        font-size: 0;
        .left {
          margin: 20rpx;
        }
        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          
          image {
            width: 100%;
          }
        }
      }
    }
  }
</style>